<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的網站｜歡迎光臨</title>
  <meta name="description" content="這是我的個人網站，分享我的作品、想法與聯絡方式。">
  <style>
    /* 簡單樣式：僅供示範 */
    body {
      font-family: 'Microsoft JhengHei', 'sans-serif';
      line-height: 1.6;
      margin: 0;
      padding: 0;
      background-color: #f9f9f9;
      color: #333;
    }
    header {
      background-color: #2c3e50;
      color: white;
      text-align: center;
      padding: 2rem 1rem;
    }
    nav {
      background-color: #34495e;
      text-align: center;
    }
    nav a {
      color: white;
      text-decoration: none;
      padding: 1rem 1.5rem;
      display: inline-block;
    }
    nav a:hover {
      background-color: #2980b9;
    }
    main {
      max-width: 800px;
      margin: 2rem auto;
      padding: 0 1rem;
    }
    section {
      margin-bottom: 2rem;
    }
    footer {
      text-align: center;
      padding: 1.5rem;
      background-color: #2c3e50;
      color: #ecf0f1;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>

  <header>
    <h1>歡迎來到我的網站</h1>
    <p>這裡是我分享想法、作品與日常的地方</p>
  </header>

  <nav>
    <a href="#home">首頁</a>
    <a href="#about">關於我</a>
    <a href="#portfolio">作品集</a>
    <a href="#contact">聯絡我</a>
  </nav>

  <main>
    <section id="home">
      <h2>👋 你好！</h2>
      <p>感謝您造訪我的網站！我是<strong>王小明</strong>，一位熱愛網頁設計與寫作的自由工作者。</p>
      <p>在這裡，您可以了解我的背景、瀏覽我的作品，或直接與我聯繫。</p>
    </section>

    <section id="about">
      <h2>關於我</h2>
      <p>我畢業於台灣大學資訊工程學系，擁有五年前端開發經驗，擅長 HTML、CSS、JavaScript 與 React。</p>
      <p>平時喜歡攝影、登山，也常在部落格分享科技與生活的觀察。</p>
    </section>

    <section id="portfolio">
      <h2>作品集</h2>
      <ul>
        <li>會員註冊系統（React + Firebase）</li>
        <li>台灣景點導覽網站（響應式設計）</li>
        <li>個人財務管理工具（Vue.js）</li>
      </ul>
      <p>👉 <a href="#" style="color:#2980b9">查看完整作品集</a></p>
    </section>

    <section id="contact">
      <h2>聯絡我</h2>
      <p>歡迎透過以下方式與我聯繫：</p>
      <ul>
        <li>電子信箱：<a href="mailto:example@example.com">example@example.com</a></li>
        <li>LinkedIn：<a href="#" target="_blank">點此前往</a></li>
        <li>Instagram：<a href="#" target="_blank">@xiaoming_tw</a></li>
      </ul>
      <p>我通常會於 2 個工作日內回覆，謝謝！</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 我的網站｜版權所有</p>
    <p>本網站使用繁體中文（台灣）</p>
  </footer>

</body>
</html>